<template>
  <div class="home">
    <div class="swiper"></div>
    <div class="dollPlace">{{dollPlace}}</div>
    <div class="chooseList">
      <ChooseCard
          v-for="(item,index) in cardList"
          :cardItem='item'
          :key='index'
          :activeIndex = 'index'
      />
    </div>
  </div>
</template>

<script>
  import ChooseCard from './common/chooseCard.vue'
  import {mapGetters, mapActions} from 'Vuex'
  import config from '../utils/config'
  export default {
    components: {ChooseCard},
    data () {
      return {
        dollPlace:'深圳市城市广场B栋娃娃机',
        cardList:config.cardList
      }
    },
    computed: {
      ...mapGetters([
        'count'
      ])
    },
    mounted() {
    },
    methods: {
      ...mapActions({
        _handleAdd: 'ADDCOUNT',
        _handleSub: 'SUBCOUNT'
      })
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/scss" lang="scss" scoped>
  .home {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .swiper {
      width: 100%;
      height: 260px;
      background: url("../assets/images/swiper.png") no-repeat center;
      -webkit-background-size: cover;
      background-size: cover;
    }
    .dollPlace {
      width: 100%;
      height: 70px;
      text-align: center;
      line-height: 70px;
      font-size: 16px;
      font-weight: bold;
    }
    .chooseList {
      border-top: 1px solid rgb(243,243,243);
      display: flex;
      flex-wrap: wrap;
      padding: 20px 0 0 20px;
    }
  }
</style>
